<template>
  <div class="add_hospital_page">

    <div class="nav_bar">
      <div class="back" @click="goBack">
        <span class="el-icon-arrow-left"></span>
        <span>返回</span>
      </div>

      <div class="top_menus">
        <div class="menu_cell" :class="step == item.id ? 'menu_cell_active' : ''" v-for="(item, index) in menus" :key="index" @click="menuEvent(item)">{{ item.name }}</div>
      </div>
    </div>

    <!-- 第一步 基础信息 开始 -->
    <div class="content" v-show="step == 1">
      <el-form ref="addForm" :model="addForm" class="add_form" :rules="addFormRules" size="small" :label-width="labelWidth">
        <el-form-item label="商品名称：" prop="goodsName">
          <el-input v-model="addForm.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="项目分类：" prop="projectId">
          <!-- <el-input v-model="addForm.projectId"></el-input> -->
          <project-select v-model="addForm.projectId" :multiple="false"></project-select>
        </el-form-item>
        <el-form-item label="优惠价：" prop="activityPrice">
          <el-input v-model="addForm.activityPrice">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="原价：" prop="sellPrice">
          <el-input v-model="addForm.sellPrice"><template slot="append">元</template></el-input>
        </el-form-item>
        <el-form-item label="可使用医院：" class="long_form_item">
          <div class="goods_tab" v-if="hospitalList && hospitalList.length">
            <div class="tab_head">
              <div class="tr">
                <div class="th">医院信息</div>
                <div class="th">操作</div>
              </div>
            </div>
            <div class="tab_body">
              <div class="tr" v-for="(item,index) in hospitalList" :key="index">
                <div class="td">
                  <GoodsHospital :info="item"></GoodsHospital>
                </div>
                <div class="td">
                  <el-link type="danger" @click="removeHospital(item)">移除</el-link>
                </div>
              </div>
            </div>
          </div>
          <el-button type="primary" icon="el-icon-plus" plain round @click="openDialog">选择</el-button>

        </el-form-item>
        <el-form-item label="商品图片：" class="long_form_item">
          <ImageUpload v-model="addForm.goodsPics" :limit="3" tip="图片尺寸16:9，大小在5M以内"></ImageUpload>
        </el-form-item>
        <el-form-item label="更多介绍：" class="long_form_item">
          <WangEditor v-model="addForm.detailIntroduce"></WangEditor>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="nextStep">保存，下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第一步 基础信息 end -->

    <!-- 第二步 平台运营 开始 -->
    <div class="content" v-show="step == 2">
      <el-form ref="secondForm" :rules="secondFormRules" :model="addForm" class="" size="small" :label-width="labelWidth">
        <el-form-item label="上架状态：" class="" prop="onShelf">
          <el-radio-group v-model="addForm.onShelf">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架可见</el-radio>
            <el-radio :label="0">下架不可见</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否首页：" class="" prop="homePageShow">
          <el-radio-group v-model="addForm.homePageShow">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="展示预约数：" class="" prop="initAppointmentCnt">
          <el-input v-model="addForm.initAppointmentCnt" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="展示评分：" class="" prop="initScore">
          <el-input v-model="addForm.initScore" max="5" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="排序时间：" class="" prop="orderTime">
          <el-date-picker v-model="addForm.orderTime" type="date" class="a_input" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="seo标题：" class="" prop="seoTitle">
          <el-input v-model="addForm.seoTitle" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="seo关键词：" class="" prop="seoKeywords">
          <el-input type="textarea" v-model="addForm.seoKeywords" class="a_area" rows="3" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="seo描述：" class="" prop="seoDescription">
          <el-input type="textarea" v-model="addForm.seoDescription" class="a_area" rows="3" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="" class="long_form_item">
          <el-button type="primary" :loading="loading" @click="saveInfo">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第二步 平台运营 end -->

    <!-- 选择医院 弹框 开始 -->
    <ChooseHospital v-model="showHospital" :list="hospitalList" v-if="showHospital" @change="onHospitalChange"></ChooseHospital>
    <!-- 选择医院 弹框 end -->

  </div>
</template>
<script>
import ImageUpload from "@/components/upload/index.vue";
import WangEditor from "@/components/wangEditor/index.vue";
import ChooseHospital from "./hospital.vue";
import GoodsHospital from "@/components/hospital/hospital.vue";
import {
  BASEURL,
  ADD_GOODS_INFO,
  GET_GOODS_INFO,
  EDIT_GOODS_INFO,
} from "@/http/goods";
import { deepClone, showToast } from "@/common/util";
import {IS_RATE_DECIMAL} from '@/common/validator'
export default {
  components: {
    ImageUpload,
    WangEditor,
    ChooseHospital,
    GoodsHospital,
  },
  data() {
    return {
      menus: [
        { name: "基础信息", id: 1 },
        { name: "平台运营", id: 2 },
      ],
      step: 1,
      addForm: {},
      labelWidth: "120px",
      showHospital: false,
      addFormRules: {
        goodsName: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        projectId: [
          { required: true, message: "请选择项目分类", trigger: "change" },
        ],
        activityPrice: [
          { required: true, message: "请输入优惠价", trigger: "blur" },
        ],
        sellPrice: [{ required: true, message: "请输入原价", trigger: "blur" }],
      },
      secondFormRules: {
        onShelf: [
          { required: true, message: "请选择上架状态", trigger: "change" },
        ],
        homePageShow: [
          { required: true, message: "请选择上架状态", trigger: "change" },
        ],
        initAppointmentCnt: [
          { required: true, message: "请输入展示预约数", trigger: "blur" },
        ],
        initScore: [
          { required: true, message: "请输入展示评分", trigger: "blur" },
          { validator: IS_RATE_DECIMAL, trigger: 'blur' }
        ],
        orderTime: [
          { required: true, message: "请输入排序时间", trigger: "blur" },
        ],
        seoTitle: [
          { required: true, message: "请输入seo标题", trigger: "blur" },
        ],
        seoKeywords: [
          { required: true, message: "请输入seo关键词", trigger: "blur" },
        ],
        seoDescription: [
          { required: true, message: "请输入seo描述", trigger: "blur" },
        ],
      },
      hospitalList: [],
      loading: false,
      checkList: [],
    };
  },
  created() {
    let query = this.$route.query;
    if (query.id) {
      this.getInfo(query.id);
    }
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      //this.step = row.id;
      if (this.step == 1) {
        this.$refs.addForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.step = row.id;
        });
        return false;
      }
      this.step = row.id;
    },

    // 返回上一页
    goBack() {
      this.$router.go("-1");
    },

    // 打开医院选择框
    openDialog() {
      this.showHospital = true;
    },

    // 下一步
    nextStep() {
      this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.step = 2;
      });
    },

    // 获取商品详情
    getInfo(id) {
      let oParams = {};
      oParams.id = id;
      GET_GOODS_INFO(oParams).then((res) => {
        let obj = res.data || {};
        if (obj.goodsPics && obj.goodsPics.length) {
          let arr = [];
          obj.goodsPics.map((k) => {
            arr.push({
              name: k,
              url: BASEURL + k,
              path: k,
            });
          });
          obj.goodsPics = arr;
        }
        delete obj.followedStatus;
        this.addForm = obj;
        this.hospitalList = obj.hospitalList||[]
      });
    },

    // 获取参数
    getParams() {
      let o = deepClone(this.addForm);
      let arr = [];
      let list = this.hospitalList || [];
      if (o.goodsPics) {
        o.goodsPics.map((k) => {
          arr.push(k.path);
        });
        o.goodsPics = arr;
      }

      // 可使用的医院
      if (list && list.length) {
        let hospitalIds = [];
        list.map((k) => {
          hospitalIds.push(k.id);
        });
        o.hospitalIds = hospitalIds;
      }

      delete o.hospitalList

      return o;
    },

    // 保存信息
    saveInfo() {
      let _this = this;
      let query = _this.$route.query;
      this.$refs.secondForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = _this.getParams();
        console.log(oParams);
        _this.loading = true;

        // 编辑
        if (query.id) {
          oParams.id = query.id;
          EDIT_GOODS_INFO(oParams).then((res) => {
            _this.loading = false;
            if (res.code == 200) {
              showToast({
                message: "编辑成功",
                type: "success",
              });
              _this.goBack();
            }
          });
          return false;
        }

        // 新增
        ADD_GOODS_INFO(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: "新增成功",
              type: "success",
            });
            _this.goBack();
          }
        });
      });
    },

    // 监听选择医院
    onHospitalChange(e) {
      //this.$set(this.addForm, "checkList", e);
      this.hospitalList = e;
    },

    // 移除医院
    removeHospital(row) {
      let list = this.hospitalList;
      let arr = list.filter((k) => k.id != row.id);
      this.hospitalList = arr;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/addHospital.scss";
</style>